<template>
  <div>
    <div class="app-container">
      <div class="flex items-center justify-between mb-20px">
        <div>
          <!-- 应用信息卡片 -->
          <div v-if="addon && addon.id" class="app-info-card flex items-center gap-16px">
            <div class="flex items-center gap-12px">
              <img
                v-if="addon.icon"
                :src="addon.icon"
                :alt="addon.title"
                class="w-48px h-48px rounded-6px object-cover border border-gray-200"
                @error="handleImageError"
              />
              <div v-else class="app-icon-placeholder w-48px h-48px rounded-6px flex items-center justify-center border border-gray-200">
                <el-icon size="24" color="#86909C">
                  <Box />
                </el-icon>
              </div>
            </div>
            <div class="flex-1">
              <div class="flex items-center gap-8px mb-4px">
                <h2 class="app-title text-18px">{{ addon.title }}</h2>
                <el-tag v-if="addon.type_name" size="small" type="info">{{ addon.type_name }}</el-tag>
              </div>
              <div class="app-meta flex items-center gap-16px">
                <span><strong>应用标识：</strong>{{ addon.name }}</span>
                <span><strong>应用ID：</strong>{{ addon.id }}</span>
                <span v-if="addon.author"><strong>作者：</strong>{{ addon.author }}</span>
              </div>
              <p v-if="addon.desc" class="app-desc">{{ addon.desc }}</p>
            </div>
          </div>

          <!-- <div class="flex items-center gap-12px">
            <h1 class="text-22px font-600 text-#1f2329">版本管理</h1>
            <p>应用版本管理</p>
          </div>
          <p class="text-13px text-#646A73 mt-6px">管理应用的不同版本和发布配置</p> -->
        </div>
        <div class="flex items-center gap-12px">
          <el-button icon="QuestionFilled" @click="helpVisible = true">帮助</el-button>
          <el-button type="primary" icon="Plus" @click="getForm(0)">新增版本</el-button>
        </div>
      </div>

      <div class="rounded-8px border border-#ebeef5 bg-white px-16px mb">
        <div class="search">
          <el-form ref="form" :model="searchData" label-width="80px" class="p-t-20px" :inline="true" label-position="left">
            <el-form-item label="搜索">
              <el-input v-model="searchData['title like']" placeholder="请输入应用名称" />
            </el-form-item>
            <el-form-item label="">
              <el-input v-model="searchData['name']" placeholder="应用标识" style="width: 200px" />
            </el-form-item>
            <el-form-item style="text-align: right; margin-right: 20px">
              <el-button type="primary" @click="getList(0)">筛选</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- <div class="flex items-center">
          <el-button icon="QuestionFilled" @click="helpVisible = true">帮助</el-button>
          <el-button type="primary" @click="getForm(0)">新增</el-button>
        </div> -->
      </div>
      <el-table v-loading="loading" :data="dkTableData" style="width: 100%" class="table">
        <el-table-column prop="id" label="id" width="80" />
        <el-table-column prop="title" label="版本名称" />
        <el-table-column prop="number" label="版本号">
          <template #default="scope">
            <el-tag type="danger">{{ scope.row.number }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="日期">
          <template #default="scope">
            <p class="op-title">创建时间</p>
            <p>{{ scope.row.create_time }}</p>
            <p class="op-title">更新时间</p>
            <p>{{ scope.row.update_time }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="340px">
          <template #default="scope">
            <p class="op-title">应用发布</p>
            <el-button type="primary" plain @click="showPack(scope.row.id)">1打包</el-button>
            <el-button type="primary" plain @click="showEncrypt(scope.row.id)">2加密</el-button>
            <el-button type="primary" plain @click="showPublish(scope.row.id)">3发布</el-button>
            <p class="op-title">应用管理</p>
            <el-button type="primary" @click="getForm(scope.row.id)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
            <p class="op-title">数据库管理</p>
            <el-button type="primary" @click="showTable(scope.row.id)">数据表</el-button>
            <el-button type="primary" @click="showComparison(scope.row.id)">版本比对</el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        class="bg-white rounded-8px p10px mt"
        background
        layout="total,prev, pager, next"
        :total="total"
        :current-page="page"
        :page-size="pageSize"
        @current-change="currentChange"
      />
    </div>
    <dk-form ref="fc" :form-data="formData" :is-dialog="true" @submit="getList(0)" />
    <!--    弹窗-->
    <el-dialog v-model="dialogVisible" title="应用创建数据表" width="1200px" top="10vh">
      <install-sql :key="'install' + chooseId" :vid="chooseId" />
    </el-dialog>
    <el-dialog v-model="dialogVersionVisible" title="版本对比" width="1200px" top="10vh">
      <comparison :key="'comparison' + chooseId" :aid="aid" :vid="chooseId" />
    </el-dialog>
    <el-dialog v-model="dialogPackVisible" title="应用打包" width="800px" top="10vh" :close-on-click-modal="false">
      <pack :key="chooseId" :aid="aid" :vid="chooseId" />
    </el-dialog>
    <el-dialog v-model="dialogEncryptVisible" title="应用加密" width="800px" top="10vh" :close-on-click-modal="false">
      <encrypt :key="chooseId" :aid="aid" :vid="chooseId" />
    </el-dialog>
    <el-dialog v-model="dialogPublishVisible" title="版本发布" width="800px" top="10vh" :close-on-click-modal="false">
      <Publish :key="chooseId" :aid="aid" :vid="chooseId" @close="dialogPublishVisible = false" />
    </el-dialog>
  </div>
</template>

<script>
import { del, getList, getForm } from '@/api/addons/version'
import Comparison from '@/views/addons/version/components/Comparison.vue'
import Pack from '@/views/addons/version/components/Pack.vue'
import InstallSql from '@/views/addons/version/components/InstallSql.vue'
import Encrypt from '@/views/addons/version/components/Encrypt.vue'
import Publish from '@/views/addons/version/components/Publish.vue'

export default {
  components: { Publish, Encrypt, InstallSql, Pack, Comparison },
  props: {
    value: {
      default: '',
      type: String
    }
  },
  data() {
    return {
      page: 1,
      pageSize: 10,
      total: 0,
      dkTableData: [],
      searchData: {
        aid: this.aid
      },
      addon: {},
      dialogFormVisible: false,
      formWidth: '1000px',
      formData: null,
      loading: true,
      detail: {},
      dialogVisible: false,
      dialogVersionVisible: false,
      dialogPackVisible: false,
      dialogEncryptVisible: false,
      dialogPublishVisible: false,
      aid: this.$route.params.aid || 0,
      chooseId: 0
    }
  },
  computed: {},
  mounted() {
    this.reset()
  },
  methods: {
    showTable(id) {
      this.chooseId = id
      this.dialogVisible = true
    },
    showComparison(id) {
      this.chooseId = id
      this.dialogVersionVisible = true
    },
    showPack(id) {
      this.chooseId = id
      this.dialogPackVisible = true
    },
    showEncrypt(id) {
      this.chooseId = id
      this.dialogEncryptVisible = true
    },
    showPublish(id) {
      this.chooseId = id
      this.dialogPublishVisible = true
    },
    getForm(id) {
      getForm(id, this.aid)
        .then((res) => {
          this.formData = res.data
          this.$refs.fc.show()
        })
        .catch((res) => {})
    },
    handleDelete(item) {
      this.$confirm('此操作将永久删除该事件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(item.id).then((res) => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList(0)
        })
      })
    },
    getList(page) {
      this.page = page || 0
      getList(this.page, this.pageSize, this.searchData).then((res) => {
        this.dkTableData = res.data
        this.total = parseInt(res.msg)
        this.loading = false
        this.addon = res.other
      })
    },
    reset() {
      this.searchData = {
        name: '',
        aid: this.aid,
        type: ''
      }
      this.getList()
    },
    currentChange(page) {
      this.getList(page)
    },
    handleImageError(event) {
      // 图片加载失败时的处理
      event.target.style.display = 'none'
      event.target.nextElementSibling.style.display = 'flex'
    }
  }
}
</script>

<style scoped lang="scss">
.op-title {
  margin: 5px 0;
}

/* 图片占位符样式 */
.app-icon-placeholder {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);

  .el-icon {
    opacity: 0.6;
  }
}

/* 应用信息文本样式 */
.app-title {
  color: #1d2129;
  font-weight: 600;
  margin: 0;
}

.app-meta {
  color: #86909c;
  font-size: 13px;

  strong {
    color: #4e5969;
    font-weight: 500;
  }
}

.app-desc {
  color: #4e5969;
  font-size: 13px;
  margin: 4px 0 0 0;
  line-height: 1.4;
}
</style>
